<template>
  <view
    :style="{ height: screenHeight + 'px', width: screenWidth + 'px' }"
    class="all-container"
  >
    <view class="tip-container">
      <span
        class="tip-content"
        v-for="(item, index) in diagnoseDescArr"
        :key="index"
        >{{ item }}</span
      >
    </view>

    <p class="content-container">
      {{ diagnoseContent }}
    </p>

    <view class="unlock-tip" @click="handleUnlock">
      <text>点击解锁</text>
      <text  >剩余解锁次数：{{ unLockNum }}</text>
    </view>

    <image class="down-arr" @click="changePage" />
  </view>
</template>

<script>
export default {
  props: {
    pageIndex:{
      type:Number,
      default:0,
    },
    itemObj: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  data() {
    return {
      screenHeight: 0,
      screenWidth: 0,
      diagnoseDescArr: [],
      contentList: [],
      diagnoseContent:"",
      unLockNum:0, // 剩余解锁次数
    };
  },
  onReady() {
    let systemInfo = uni.getSystemInfoSync();
    this.screenHeight = systemInfo.windowHeight;
    this.screenWidth = systemInfo.windowWidth;
  },

  methods: {
    changePage() {
      this.$emit("setCurrentPage", this.pageIndex+2);
    },

    handleUnlock() {
      this.$emit("clickUnlock", {});
    },
  },

  watch: {
    itemObj: {
      handler(val) {
        if (val.diagnoseDesc) {
          // 分割处理
          this.diagnoseDescArr = val.diagnoseDesc.split("|");
        }
        if (val.contentList) {
          this.contentList = val.contentList; 
        }
        if(val.diagnoseContent){
          this.diagnoseContent = val.diagnoseContent; 
        }
        this.unLockNum = val.unLockNum;
      },

      deep: true, // 深度监听
      immediate: true, // 初始化的时候立刻执行一次
    },
  },
};
</script>
<style  lang="scss" scoped>
.all-container {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-image: url($img-base + "career/diagnosis/judge_result_three_item_bg.png");

  display: flex;
  flex-direction: column;
  align-items: center;

  .tip-container {
    width: 66%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    position: fixed;
    top: 13%;
    .tip-content {
      text-align: center;
      line-height: 60rpx;
      color: #b4b5ff;
      font-size: 28rpx;
    }
  }

  .content-container {
    width: 78%;
    height: auto;

    position: fixed;
    bottom: 22%;
    line-height: 60rpx;
    color: transparent;
    font-size: 28rpx;
    background-image: linear-gradient(white,white, white, white, white, white, white,  #ff000000);
    background-clip: text;
    white-space: normal;
    word-break: break-all; 

    display: -webkit-box;
    -webkit-box-orient: vertical;
    /*设置省略号在容器第四行文本后*/
    -webkit-line-clamp: 5;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .unlock-tip {
    width: auto;
    height: auto;
    position: fixed;
    display: flex; 
    flex-direction: column;
    align-items: center;
    
    bottom: 15%;
    padding: 20rpx;
    color: white;
    font-size: 30rpx;
  }
  .down-arr {
    position: fixed;
    bottom: 5%;
    width: 60rpx;
    height: 60rpx;
    background-size: 100% 100%;
    background-image: url($img-base + "career/diagnosis/judge_result_item_down_arr.png");
  }
}
</style>